import React,{useEffect} from 'react'
import {forceCheck} from 'react-lazyload'

import Slider from '../../components/slider/index'
import RecommendList from '../../components/list/index'
import {connect} from 'react-redux'
import * as actionTypes from './store/actionCreators';
import Scroll from '../../baseUI/scroll/index';
import {Content} from './style'
import Loading from '../../baseUI/loading/index';

function Recommend(props) {
  const { bannerList, recommendList, enterLoading } = props;

  const { getBannerDataDispatch, getRecommendListDataDispatch } = props;

  useEffect (() => {
    getBannerDataDispatch ();
    getRecommendListDataDispatch ();
    //eslint-disable-next-line
  }, []);

  const bannerListJS = bannerList ? bannerList.toJS () : [];
  const recommendListJS = recommendList ? recommendList.toJS () :[];
  console.log(enterLoading)
  return <Content>
        {enterLoading? <Loading/> : null}
        <Scroll className="list" onScroll={forceCheck}>
          <div>
            <Slider bannerList={bannerListJS}></Slider>
            <RecommendList recommendList={recommendListJS}></RecommendList>
          </div>
        </Scroll>
      </Content> 

}
const mapStateToProps = (state) => {
   // 不要在这里将数据 toJS
  // 不然每次 diff 比对 props 的时候都是不一样的引用，还是导致不必要的重渲染，属于滥用 immutable
  return {
    bannerList: state.getIn(['recommend','bannerList']),
    recommendList: state.getIn (['recommend', 'recommendList']),
    enterLoading: state.getIn(['recommend', 'enterLoading'])
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    getBannerDataDispatch () {
      dispatch (actionTypes.getBannerList ());
    },
    getRecommendListDataDispatch(){
      dispatch (actionTypes.getRecommendList ());
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(React.memo(Recommend))